<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>Floor View</title>
    <script src="/js/websocket.js"></script>    <!--自己写的js文件-->
    <script src="/js/jquery.min.js"></script>
    <script src="/js/sockjs.min.js"></script>
    <script src="/js/stomp.min.js"></script>
    <script id="code">
        var DEBUG_FLAG = true;
        $(function ()      //进入页面后连接服务器
        {
            ipAndPort = "localhost:8081";
            //启动websocket
            connect();
        });
        //原生Broker
        // function send() {
        //   var msg = $("#msg").val();
        //   stompClient.send("/send", {}, msg);
        // }
        //
        // function sendToAll() {
        //   var msg = $("#msg").val();
        //   stompClient.send("/sendToAll", {}, msg);
        // }
        //群发
        function sendToAllByTemplate() {
            var msg = $("#msg").val();
            var data = {"sendUserId": uid, "msg": msg};
            stompClient.send("/sendToAllByTemplate", {}, JSON.stringify(data));
        }

        //单发
        function sendToUserByTemplate() {
            var msg = $("#msg").val();
            var toUserId = $("#userId").val();
            //发送消息的内容 sendUserId:发送者   receUserId：接收者
            var data = {"sendUserId": uid, "receUserId": toUserId, "mconn": msg};
            stompClient.send("/sendToUserTemplate", {}, JSON.stringify(data));
        }

        //单发
        function message() {
            var msg = $("#msg").val();
            var toUserId = $("#userId").val();
            //发送消息的内容 sendUserId:发送者   receUserId：接收者
            var data = {"sendUserId": uid, "receUserId": toUserId, "mconn": msg};
            stompClient.send("/message", {}, JSON.stringify(data));
        }

        // //rabbitMq
        // //rabbitMQ的/exchange/<ExchangeName>
        // function sendToUserByExchange() {
        //   var msg = $("#msg").val();
        //   var toUserId = $("#userId").val();
        //   //发送消息的内容
        //   var data = {"fromUserId": userId, "toUserId": toUserId, "msg": msg};
        //   stompClient.send("/app/sendToUserExchange", {}, JSON.stringify(data));
        // }
        // //rabbitMQ的/queue/<queue>
        // function sendToUserByQueue() {
        //   var msg = $("#msg").val();
        //   var toUserId = $("#userId").val();
        //   //发送消息的内容
        //   var data = {"fromUserId": userId, "toUserId": toUserId, "msg": msg};
        //   stompClient.send("/app/sendToUserQueue", {}, JSON.stringify(data));
        // }
        // //rabbitMQ的/topic/<topicName>
        // function sendToUserByTopic() {
        //   var msg = $("#msg").val();
        //   var toUserId = $("#userId").val();
        //   //发送消息的内容
        //   var data = {"fromUserId": userId, "toUserId": toUserId, "msg": msg};
        //   stompClient.send("/app/sendToUserTopic", {}, JSON.stringify(data));
        // }
        //
        // //rabbitMQ的/topic/<topicName>：群发
        // function sendToAllByTopic() {
        //   var msg = $("#msg").val();
        //   stompClient.send("/app/sendToAllTopic", {}, msg);
        // }
    </script>
</head>

<body style="margin: 0px;padding: 0px;overflow: hidden; ">
<!-- 显示消息-->
<textarea id="debuggerInfo" style="width:100%;height:200px;" readonly></textarea>
<!-- 发送消息-->
<div>用户：<input type="text" id="userId"></input></div>
<div>消息：<input type="text" id="msg"></input></div>
<!--  原生的Broker-->
<!--  <div><input type="button" value="发送消息" onclick="send()"></input></div>-->
<!--  <div><input type="button" value="发送消息sendToAll" onclick="sendToAll()"></input></div>-->
<!--使用Template操作-->
<div><input type="button" value="点对点发消息" onclick="sendToUserByTemplate()"></input></div>
<div><input type="button" value="群发消息" onclick="sendToAllByTemplate()"></input></div>
<div><input type="button" value="点对点发消息message" onclick="message()"></input></div>
<!--  RabbitMq-->
<!--  <div><input type="button" value="发送消息sendToUserByExchange" onclick="sendToUserByExchange()"></input></div>-->
<!--  <div><input type="button" value="发送消息sendToUserByQueue" onclick="sendToUserByQueue()"></input></div>-->
<!--  <div><input type="button" value="发送消息sendToUserByTopic" onclick="sendToUserByTopic()"></input></div>-->
<!--  <div><input type="button" value="群发消息sendToAllByTopic" onclick="sendToAllByTopic()"></input></div>-->
</body>
</html>